// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Form, Popconfirm, Upload, message, Button, Modal, Row, Col } from 'antd'
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'

// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
import { reqInform } from 'utils/notification'
// 当前组件样式
import styles from './couponListStyle.less'
import Uploader from '../../../../widget/Upload'
import ListPage from 'widget/PageTmpl/ListPage'
import cx from 'classnames'
import $ from 'jquery'
import Cookie from 'js-cookie'
import { download } from 'utils/util'
//权限管理
import FlagBtn from 'widget/FlagBtn/FlagView'

const FormItem = Form.Item
/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */

const couponListView = function ({dispatch, model, form}) {
  // 表单的子函数
  const {resetFields, getFieldDecorator, validateFields, setFieldsValue} = form
  // 取出model对象，命名空间
  const {modelObj, namespace} = model
  
  // modelObj.xxx获取model中状态机的值
  let {visible, imgUrl, imageUrls} = modelObj
  // 点击处理事件
  const clickHandler = (e) => {
    // 分发到model文件中effects的xxx方法
    dispatch({
      type: `${namespace}/xxx`,
      payload: {}
    })
  }
  
  //下载excel
  function downFile (url, fileName = 'report.xls') {
    var link = document.createElement('a')
    let evt = document.createEvent('MouseEvents')
    evt.initEvent('click', true, true)
    link.href = url
    link.dispatchEvent(evt)
    // window.open(url)
  }
  
  function updateUploadModal () {
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {visible: !visible}
    })
  }
  
  // 分页表格属性配置
  let pageProps = {
    // ---------- 界面部分 ----------
    'ui': {
      // 页面接口地址
      'api_url': 'admin/coupons/config/list',
      // "api_url": "admin/housetype/list",
      // 接口方式
      'method': 'POST',
      'app': 'isales-mgmt-application',
      // 接口参数
      'params': '',
      // 模拟数据 - 用于开发需要，若填充了上面的api_url之后，请将此项设置为null
      // "mockData": mockData,
      'mockData': null,
      // 查询栏
      'search_bar': {
        'fields': [
          {
            en_name: 'name',
            zh_name: '优惠券名称',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
          {
            en_name: 'type',
            zh_name: '优惠券类型',
            elem_type: 'Select',
            elem_valid_type: 'string',
            cmpt_items: [
              {
                value: '1',
                label: '代金券'
              },
              {
                value: '2',
                label: '折扣券'
              }
            ],
          },
          {
            en_name: 'validTime',
            zh_name: '有效期',
            elem_type: 'Date',
            format: 'YYYY-MM-DD',
            // query_format: "YYYY-MM-DD HH:mm:ss",   // 请求参数, 当请求参数和显示时格式不同可通过该参数区分
            // double: true,  // 日期范围组件 使用"YYYY-MM-DD HH:mm:ss"格式时, 显示不全时可使用该参数, 将占据两格位置
            split_keys: ['startTime', 'expireDate'],
            elem_valid_type: 'string'
          },
          {
            en_name: 'status',
            zh_name: '优惠券状态',
            elem_type: 'Select',
            elem_valid_type: 'string',
            cmpt_items: [
              {
                value: '1',
                label: '未上架'
              },
              {
                value: '2',
                label: '已上架'
              },
              {
                value: '3',
                label: '已下架'
              },
              {
                value: '4',
                label: '已过期'
              }
            ],
          },
        ],
        searchHandler: (p) => { // 自定义搜索按钮回调函数，点击搜索时触发
          console.log('search click', p)
        },
        resetHandler: (p) => { // 自定义重置按钮回调函数，点击重置时触发
          console.log('reset click', p)
        },
        searchCallback: params => { // 自定义搜索完成后的后调函数, 搜索完成后触发, 并将本次搜索的参数传入
          console.log('search finish', params)
        },
        pasteTargetList: [  // 列表组件中将输入框的en_name作为默认id(也可以通过id另外设置)
          'carName',  // 将需要粘贴事件拦截的输入框id以数组的形式传入, 该参数对应PasteFromClipboard组件的targetList参数
        ]
      },
      // 数据表格
      'table': {
        'status_params': 'status=0',
        'status_text': '全部',
        'scroll': {x: 1100},
        'action_props': {width: 200},
        // 表头字段列表"
        'fields': [
          {
            'en_name': 'name',
            'zh_name': '优惠券名称',
            width: 200
          },
          {
            'en_name': 'projectName',
            'zh_name': '项目名称',
            // width: 274,
            render: (text, record) => {
              return <div className={styles.longEllipsis} title={text}>{text}</div>
            }
          },
          {
            'en_name': 'scene',
            'zh_name': '使用场景',
            width: 120,
            render: (text, record) => {
              return (<span>{text+''=='1'?'普通场景':(text+''=='2'?'拼团场景':(text+''=='3')?'活动场景':'')}</span>)
            }
          },
          {
            'en_name': 'type',
            'zh_name': '类型',
            width: 80,
            render: (text, record) => {
              return <span>{{1: '代金券', 2: '折扣券'}[record.type] || ''}</span>
            }
          },
          {
            'en_name': 'sqcj',
            'zh_name': '有效使用时间',
            width: 220,
            render: (text, item) => {
              return <div>{`${item.startTime || ''}${item.expireDate && ' ~ '||''}${item.expireDate || ''}`}</div>
            }
          },
          {
            'en_name': 'status',
            'zh_name': '状态',
            width: 80,
            render: (text, record) => {
              return <div>
                {{1: '未上架', 2: '已上架', 3: '已下架', 4: '已过期'}[text] || ''}
              </div>
            }
          },
        ],
        'actions': [
          {
            func_name: 'bussinessDetail',
            label: '业务详情',
            render: (record) => {
              
              return (

                <div>
                  <FlagBtn node={<Link to='home/couponAdmin/couponDetail' query={{couponsConfigId: record.couponsConfigId}}>查看详细<span className="ant-divider" style={{display:'inline-block'}}/></Link>} btnId={'20302'}> </FlagBtn>
                  {/* <Link to='home/couponAdmin/couponDetail' query={{couponsConfigId: record.couponsConfigId}}>查看详细</Link> */}
                  {/*<span className={cx("ant-divider")} />*/}
                  {/*<Link onClick={() => {
										dispatch({ type: `${namespace}/dowmCoupon`, payload: { params: { couponsConfigId: record.couponsConfigId, status: '3' } } })
									}}>下架</Link>*/}
                 { record.status!=4?
                 <FlagBtn node={<Link to='home/couponAdmin/couponAdd' query={{couponsConfigId: record.couponsConfigId}}>编辑<span className="ant-divider" style={{display:'inline-block'}}/></Link>} btnId={'20303'}> </FlagBtn>:null
                 }

                  <FlagBtn node={<Popconfirm Collapse title='确定要删除该优惠券吗？' okText='确定' cancelText='取消'
                              onConfirm={() => {
                                dispatch({
                                  type: `${namespace}/deleteCoupon`,
                                  payload: {params: {id: record.couponsConfigId}}
                                })
                              }}>
                    <Link>删除<span className="ant-divider" style={{display:'inline-block'}}/></Link>
                  </Popconfirm>} btnId={'20305'}> </FlagBtn>

                  <FlagBtn node={<Link to='home/couponAdmin/couponReport' query={{couponsConfigId: record.couponsConfigId}}>查看报表<span className="ant-divider" style={{display:'inline-block'}}/></Link>} btnId={'20304'}> </FlagBtn>

                  {/* <a target={'_blank'} href={`${config.baseUrl}admin/coupons/export/${record.couponsConfigId}`}>导出</a> */}
                  <FlagBtn node={<Link onClick={() => {
                    dispatch({
                      type: `${namespace}/exportCoupon`,
                      payload: {cb: downFile, params: {couponsConfigId: record.couponsConfigId}}
                    })
                  }}>导出</Link>} btnId={'20306'}> </FlagBtn>
                  
                  {/* <span className={cx("ant-divider")} /> */}
                  {/* <Link onClick={() => { }}>导入</Link> */}
                </div>
              )
            }
          }
        ]
      },
      // 操作栏
      action_bar: [
        {
          'func_name': 'exportExc',
          'label': '批量核销',
          // btnId:'20301',
          'type': 'primary',
          // "onClick": (e) => { },
          render: () => {
            return (
              <FlagBtn node={<Button className={styles.marginRight} type="primary" onClick={() => {updateUploadModal()}}>批量核销</Button>} btnId={'20301'}> </FlagBtn>
              
            )
          }
        },
        {
          'func_name': 'add',
          'label': '新增优惠券',
          btnId:'20307',
          'type': 'primary',
          'onClick': (e) => {
            hashHistory.push('/home/couponAdmin/couponAdd')
          }
        }
      ],
    },
  }
  
  if (!!modelObj.biz) {
    pageProps.biz = modelObj.biz
    pageProps.biz.syncBackCbf = (biz) => {
      dispatch({
        type: `${namespace}/updateStore`,
        payload: {biz}
      })
    }
  }

  return (
    <div className={cx('pageLayout')}>
      <Modal title={'批量核销'}
             visible={visible}
             okText={'导入'}
             cancelText={'取消'}
             onCancel={(e) => {
               updateUploadModal()
             }}
             onOk={(e) => {
               dispatch({
                 type: `${namespace}/importCoupon`,
                 payload: {fileUrl: imgUrl}
               })
             }}
             width={720}>
        <div className={styles.modalCss}>
          <Form>
            <Row>
              <Col span={24}>
                <FormItem label={'文件'} style={{marginBottom:'2px'}}>
                  <Uploader
                    uploadedUrls={imageUrls}
                    removeFileCbf={(index) => { removeImgUrl(index) }}
                    uploadSuccessCbf={(imgUrl, fileObj) => {
                      
                      let arr = [{name: fileObj.name,}]
                      dispatch({
                        type: `${namespace}/updateStore`,
                        payload: {imgUrl, imageUrls: arr}
                      })
                    }}
                    showType='5'
                    maxFiles='50'
                    accept={'.xlsx,.xls'}
                    uploadTip='支持*.xlsx, *.xls格式文件。'
                    fileType='file'
                  />
                </FormItem>
                <div style={{display:'flex'}}>
                  <span style={{color:'red', marginRight:'6px'}}>*</span>
                  <p style={{paddingRight:'50px',lineHeight:'24px'}}>请在优惠券列表-操作-导出优惠券领取明细，在核销状态列填写0或者1，（0-未使用，1-已使用）再进行导入</p>
                </div>
              </Col>
            </Row>
          </Form>
        </div>
      </Modal>
      <ListPage pageProps={pageProps}/>
    </div>
  )
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(couponListView))
